<template>
	<div class="app-container">
		<div class="dis disAl disJuB mar-bott20">
			<div class="dis">
				<div>
					<div class="hei20 foSi12">角色</div>
					<el-select v-model="roleIndex" placeholder="Select" size="small" style="width: 140px;">
						<el-option key="" label="不指定" value="" />
						<el-option v-if="item.attrs === 1" v-for="(item,index) in roleList" :key="index"
							:label="item.title" :value="item.id" />
					</el-select>
				</div>
				<div class="mar-left10">
					<div class="hei20 foSi12">状态</div>
					<el-select v-model="statusIndex" placeholder="Select" size="small" style="width: 140px">
						<el-option v-for="(item,index) in status" :key="index" :label="item.name" :value="item.id" />
					</el-select>
				</div>
				<div class="mar-left10">
					<div class="hei20 foSi12">搜索关键词</div>
					<el-input v-model="name" style="width: 140px" size="small" placeholder="姓名/手机号" />
				</div>
				<el-button type="primary" class="mar-top20 mar-left20 bac6b7" size="small"
					@click.stop="getSousuoList()">搜索</el-button>
			</div>
			<router-link v-if="juDgeTrue('employee_add')" to="/venue/employeeAdd">
				<el-button type="primary" class="mar-top20 bac6b7" size="small" icon="el-icon-user">新增员工</el-button>
			</router-link>
		</div>
		<el-table key="table0" v-loading="listLoading" :data="list" stripe style="width: 100%"
			:row-style="{ background: '#f2f2f2' }">
			<div slot="empty" class="m-empty-box">
				<div class="mar" style="width: 168px;height: 180px;">
					<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
				</div>
				<div class="title">暂无数据</div>
			</div>
			<el-table-column label="姓名" width="200px">
				<template slot-scope="{row}">
					<div style="display:flex;">
						<img ref="img" :src="row.cover_img" style="width: 30px;border-radius: 4px; margin-right:10px;"
							mode="widthFix">
						<span style="height:30px; line-height: 30px;">{{ row.name }}</span>
					</div>
				</template>
			</el-table-column>

			<el-table-column label="手机号">
				<template slot-scope="{row}">
					<span>{{ row.mobile }}</span>
				</template>
			</el-table-column>

			<el-table-column label="角色">
				<template slot-scope="{row}">
					<span>
						{{ row.group_name }}
					</span>
				</template>
			</el-table-column>

			<el-table-column class-name="status-col" label="状态">
				<template slot-scope="{row}">
					<span>{{ row.on_job == 0?'已离职':row.on_job == 1?'在职':'不指定' }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作">
				<template slot-scope="{row}">

					<router-link :to="'/venue/employeeDetail?id='+row.id">
						<el-button type="primary" size="small" icon="el-icon-edit">
							详情
						</el-button>
					</router-link>
					<!--          <el-button type="primary" size="small" icon="el-icon-edit">-->
					<!--            离职-->
					<!--          </el-button>-->
					<el-button v-if="juDgeTrue('employee_del')" style="margin-left: 6px;" type="primary" size="small" icon="el-icon-edit"
						@click="del(row)">
						删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
			@pagination="getList" />
	</div>
</template>

<script>
	// import fetchList from '@/api/article'
	import Pagination from '@/components/Pagination'
	import {
		getXuan,
		judgeButton
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		lists,
		staffDelete,
		authgrouplist
	} from '@/api/staff'; // Secondary package based on el-pagination

	export default {
		name: 'employee',
		components: {
			Pagination
		},
		data() {
			return {
				list: null,
				name: '',
				total: 0,
				listLoading: true,
				listQuery: {
					page: 1,
					limit: 10
				},
				status: {},
				roleList: {},
				roleIndex: '',
				statusIndex: 2
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '员工管理',
				url: '/venue/employee',
				pd: true
			}, {
				name: '设置',
				url: '/venue/employeeSetting',
				pd: true
			}]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 0
			})
			this.getAuthgroup()
		},
		methods: {
			juDgeTrue(name) {
				return judgeButton(name, this.roles)
			},
			getAuthgroup() {
				authgrouplist().then(response => {
					const {
						data
					} = response
					this.roleList = data
					this.getList()
				})
			},
			getSousuoList() {
				this.listQuery.page = 1
				this.getList()
			},
			getList() {
				this.listLoading = true
				lists({
					'page': this.listQuery.page,
          'limit': this.listQuery.limit,
					'group_id': this.roleIndex,
					'on_job': this.statusIndex === 2 ? '' : this.statusIndex,
					'keyword': this.name
				}).then(response => {
					const {
						data
					} = response
					console.log(response)
					if (response.code == 0) {
						this.total = data.total
						this.list = data.data
						this.status = [{
							'id': 2,
							'name': '不指定'
						}, {
							'id': 1,
							'name': '在职'
						}, {
							'id': 0,
							'name': '已离职'
						}]
						this.listLoading = false
					}
				}).catch(error => {
					console.log(error)
					this.loading = false
				})
			},
			handleSelectionChange(val) {
				console.log(val.length)
				this.xuancount = val.length
				this.multipleSelection = val
			},
			del(item) {
				this.$confirm('确定删除"' + item.name + '"吗？此操作不可恢复。如果该员工是教练且有预约的私教或团课，删除后记得及时通知会员。', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					var data = {};
					data['id'] = item.id
					staffDelete(data).then(response => {
						const {
							data
						} = response
						console.log(response)
						if (response.code == 0) {
							this.getList()
						}
					}).catch(error => {
						console.log(error)
						this.loading = false
					})
				})
			}
		}
	}
</script>

<style scoped>
	.edit-input {
		padding-right: 100px;
	}

	.cancel-btn {
		position: absolute;
		right: 15px;
		top: 10px;
	}

	.typelists {
		cursor: pointer;
		margin-right: 30px;
		margin-bottom: 10px;
		vertical-align: middle;
		font-size: 12px;
	}

	.typexuan {
		color: #41c3a8;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
		background-color: #616b74;
		color: #fff;
	}

	::v-deep .el-table--enable-row-hover .el-table__body tr>td {
		color: #000;
	}

	/* ::v-deep .el-table__body .el-table__row.hover-row td {
		background-color: #616b74
	} */
</style>
